<%--
  Created by IntelliJ IDEA.
  User: John Cage
  Date: 2020/11/14
  Time: 9:29
  To change this template use File | Settings | File Templates.
--%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

    <link rel="StyleSheet" href="../css/item.css" type="text/css" media="screen"/>
    <script>
        function backToProduct(productObj)
        {
            var product = 'productId=' + productObj.getAttribute('data-productId');
            $('#displayBlock').css({'left': '10%', 'width': '80%'});
            $.get('viewProduct', product, (data)=>
            {
                $('#displayBlock').html(data);
            });
        }
    </script>

    <div class="displayItem">
        <div id="backLink" data-productId="${sessionScope.product.productId}" onclick="backToProduct(this)">&lt; Return to ${sessionScope.product.productId}</div>

        <div id="detailItem">
            <div class="itemPicture" style="background-image: url('../images/${sessionScope.product.categoryId}item.png')"></div>
            <div class="title">${sessionScope.product.name}</div>
            <div class="subTitle">${sessionScope.item.itemId}</div>
            <div class="explain">
                ${sessionScope.product.description}
                ${sessionScope.item.attribute1}
                ${sessionScope.item.attribute2}
                ${sessionScope.item.attribute3}
                ${sessionScope.item.attribute4}
                ${sessionScope.item.attribute5}
            </div>
            <div class="price">
                <c:if test="${sessionScope.item.quantity <= 0}">
                    Back ordered.
                </c:if>
                <c:if test="${sessionScope.item.quantity > 0}">
                    ${sessionScope.item.quantity} in stock.
                </c:if>
                <fmt:formatNumber value="${sessionScope.item.listPrice}"
                                  pattern="$#,##0.00" />
            </div>
            <div class="addToCart" onclick="window.open('addItemToCart?workingItemId=${sessionScope.item.itemId}', '_self')">Add to Cart</div>
        </div>
    </div>